<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #b0b0b0;
        }
        a{
            color: aqua;
            text-decoration: none;
        }
        #xiaomi{
            height: 460px;
            width: 1226px;
            /* 设置外边距 */
            margin: 0 auto;
            /* 设置相对定位 */
            position: relative;
        }
        .left{
            height: 460px;
            width: 234px;
            background: rgb(167, 155, 155);
           /* opacity: 1; */
            float: left;
            position:absolute;
            /* 设置透明度 */
            opacity: 50%;
            
        }
        .right{
            display: none;
        }
        .rimg{
            height: 460px;
            width: 1226px;
            /* width: 1226px; */
            /* 定位 */
            /* position: relative;
            /* 设置层级 
            z-index: 2; */

            /* 1. none：隐藏对象
               2. inline： 指定对象为行内元素
               3. block： 指定对象为块元素
               4. inline-block：指定对象为行内块元素
               5. table-cell：指定对象为表格单元格
               6. flex：弹性盒
               7. inline转块级元素*/
               /* 把对象隐藏起来 */
            

        }
        .left{
            height: 40px;
            width: 160px;
              /* background-color: #b0b0b0; */
              font-size: 18px;
            /* line-height: 18px; */
            color: #2c6cba;

        }
        .left div{
          
            /* 外边距 */
            margin: 30px 50px;
        }
        .li_font{
           
            background:#ff6700;
        }




        #xiaomi2{
            /* background-color: aqua; */
            height: 614px;
            width: 1226px;
            margin: 10px auto;
        }
        .rimg2{
            width: 234px;
            height: 614px;
            float: left;
        }
        span{
            padding: 0px 0px 0px 100px;
            width: 64px;
            height: 20px;
            color: #83c44e;
            
        }
        .phone1{
            width: 234px;
            height: 300px;
            background-color: #FFFFFF;
            float: left;
            /*外边距 上  右   下   左 */
            margin: 0px 0px 14px 14px;
        }
        .img2{
            width: 160px;
            height: 160px;
            padding: 0px 0px 20px 35px;
        }
        .img3{
            width: 160px;
            height: 160px;
            padding: 20px 0px 20px 35px;
        }
        .neirong{
            width: 214px;
            height: 21px;
            margin: 0px 0px 0px 40px;
        }
        .p1{
            font-size: 12px;
            color: #b0b0b0;
            text-align: center;
        }
        .p2{
            color:#ff6700;
            text-align: center;
        }

        #mydiv111{
            width: 1226px;
            height: 170px;
            margin: 14px auto;
            background-color: aqua;
        }

        .mdiv1{
            width: 228px;
            height: 164px;
            padding: 3px 3px;
            background-color: #2c6cba;
            float: left;
        }
        .mdiv2{
            width: 228px;
            height: 164px;
            padding: 3px 3px;
            background-color: #2c6cba;
        }
        .mdiv3{
            width: 228px;
            height: 164px;
            padding: 3px 3px;
            background-color: #2c6cba;
        }
        .mdiv4{
            width: 228px;
            height: 164px;
            padding: 3px 3px;
            background-color: #2c6cba;
        }


        
        
    </style>
</head>
<body>




    <div id="xiaomi">
        <div class="left">
            <div class="phone"><a href="">手机</a></div>
            <div class="phone"><a href="">家电</a></div>
            <div class="phone"><a href="">电视</a></div>
            <div class="phone"><a href="">笔记本 平板</a></div>
            <div class="phone"><a href="">出行 穿戴</a></div>
            <div class="phone"><a href="">耳机音箱</a></div>
        </div>
        <div class="right">
            <img class="rimg" src="4.jpg">
        </div>
        <div class="right">
            <img class="rimg" src="1.jpg">
        </div>
    </div>




<!-- 
    <div id="mydiv111">
        <div class="mdiv1">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


        <div class="mdiv2"></div>
        <div class="mdiv3"></div>
        <div class="mdiv4"></div>
    </div>
 -->



    

    <div id="xiaomi2">
        <div class="left2">
            <img class="rimg2" src="2.jpg">
        </div>
        <div class="phone1">
            <span>新品</span>
            <div><img class="img2" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        <div class="phone1">
            <div><img class="img3" src="3.jpg"></div>
            <div class="neirong">小米9 6GB+128GB</div>
            <p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
            <p class="p2">2556元</p>
        </div>
        
    </div>

<!-- 轮播图 -->
<script>
    // 返回的是一个集合,可以放class,id,以及标签名
    var lunbo = document.querySelectorAll(".right");
    var index = 0;
    //通过
    lunbo[index].style.display = "block";
    // 定时器
    setInterval("time()",3000);
    


    var list=document.querySelectorAll(".phone");
    for(let i=0;i<=list.length;i++){
        //onmouseover鼠标经过事件
        list[i].onmouseover=function(){
            // 把原先的class=-- , 替换为class="li_font"
            list[i].setAttribute("class","li_font");
        }
        //
        list[i].onmouseout=function(){
            list[i].removeAttribute("class");
        }
    }


    function time(){  
        for(let i=0;i<lunbo.length;i++){
            lunbo[i].style.display="none";
        }
        lunbo[index].style.display="block";
        index++;
        if(index>=lunbo.length){
            index=0;
        }
    }
</script>

    
</body>
</html>